<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
    修改用户 <a th:href="@{/user/userList}">返回列表</a>
    <p>消息：<span th:text="${msg}"></span></p>
    <form th:action="@{/user/doUserEdit}" method="post">
        <p>
            真实姓名：<input type="text" name="userName" th:value="${user.userName}"/>
        </p>
        <p>
            账号：<input type="text" name="password" th:value="${user.password}"/>
        </p>
        <p>
            密码：<input type="text" name="loginCode" th:value="${user.loginCode}"/>
        </p>
        <p>
            <select name="roles" multiple="multiple">
                <option  th:each="role:${roleList}" th:value="${role.id}" th:text="${role.roleName}"></option>
            </select>
        </p>
        <p>
            <input type="submit" value="保存"/>
        </p>
        <input type="hidden" name="id" th:value="${user.id}"/>
    </form>

    <script type="text/javascript" th:src="@{/statics/js/jquery.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        $(document).ready(function () {
            //初始化角色
            function initRoles() {
                var userRoles = [[${user.roleList}]] ;
                console.log(userRoles) ;

                var roleIds = new Array() ;
                $.each(userRoles, function(i, role) {
                    roleIds[i] = role.id ;
                });

                var formRoles = $("[name='roles']").children() ;
                $.each(formRoles, function(i, roleOption) {
                    var val = $(roleOption).val() ;

                    $.each(roleIds, function (j) {
                        if(roleIds[j] == val) {
                            $("[name='roles']").children().eq(i).attr("selected", true);
                        }
                    })

                });
            }

            initRoles() ;
        })
    </script>
</body>
</html>